<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>我的购物车</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--设置标题图标-->
    <link rel="shortcut icon" href="http://www.shumasheying.org.cn/themes/index/public/assets/images/logo.png" type="image/x-icon" />

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!--引入第三方字体图标-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
            color: #333;
            background-color: #F5F5F5;
        }
        /*头部样式代码*/
        .h-ico-01{display: inline-block; height: 12px;width: 1px;background-color: #b0b0b0;}
        .h-a-01{display: inline-block;height:40px;line-height: 40px;margin-top: 8px;text-align: center;color: #757575;}
        .h-a-01:hover{text-decoration: none;color: #FF6700;}
        /*体部样式代码*/
        .s-h2-01{width: 1280px;height: 50px;margin: 0 auto;border-top: 1px solid #e0e0e0;position: relative;}
        .s-span-01{position: absolute;
            top: -20px;
            left: 372px;
            height: 40px;
            width: 482px;
            line-height: 40px;
            text-align: center;
            display: block;
            background-color: #f5f5f5;
        }
        .thumbnail{border: 0;border-radius: 0;position: relative;}
        .s-p-01{font-size: 14px;color: #333333;text-align: center;}
        .s-p-02{font-size: 14px;color: #FF6700;text-align: center;}
        .s-p-03{font-size: 14px;color: #757575;text-align: center;}
        .s-img-01{width:140px;padding: 30px 0 15px 0;}
        .s-a-01 {
            display: block;
            width: 100%;
            height: 100%;
        }
        .s-a-01:hover{text-decoration: none;}
        .s-a-02 {
            display: block;
            width: 100px;
            height: 30px;
            border: 1px solid #FF6700;
            text-align: center;
            line-height: 30px;
            position: absolute;
            left: 38px;
            top: 210px;
            color: #FF6700;
            font-size: 12px;
            background-color: #FFFFFF;
            display: none;
        }
        .s-a-02:hover{
            background-color: #FF6700;
            color: #FFFFFF;
            text-decoration: none;
        }
        #s-a-03:hover{text-decoration: none;color: #FF6700;}
        #s-a-04:hover{text-decoration: none;}
        .ico-01{font-size: 24px;position: relative;top: 4px;margin: 0 15px 0 25px;}
        .s-a-03{display: inline-block; width: 38px;height: 38px;}
        .s-span-02{display: inline-block; width: 60px;height: 38px;}
        /*脚部样式代码*/
        .f-div-01{text-align: center;color: #424242;padding: 30px 0;border-top: 2px solid #FF6700;}

    </style>
</head>
<body>
<header>
    <div style="border-bottom: 2px solid #FF6700;background-color: #FFFFFF;">
        <div style="width: 1280px;height: 120px;margin: 0 auto;">
            <!--导航条开始-->
            <nav style="overflow: hidden;padding: 22px 0;">
                <div style="float: left;">
                    <a href="#">
                        <img style="width: 180px;height: 56px;" alt="Brand" src="http://www.shumasheying.org.cn/themes/index/public/assets/images/logo.png">
                    </a>
                </div>
                <h2 style="float: left;margin:0 45px;line-height: 56px;font-size: 28px;color: #424242; ">我的购物车</h2>
                <div style="float: right;font-size: 12px;">
                    <a href="" class="h-a-01" style="min-width: 110px;">
                        <span>昵称</span>
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <span class="h-ico-01"></span>
                    <a href="order-management.html" class="h-a-01" style="min-width: 80px;padding: 0 5px;">我的订单</a>
                </div>
            </nav>
            <!--导航条结束-->
        </div>
    </div>
</header>
<section>
    <div style="width: 1280px;margin: 40px auto;">
        <div>
            <table style="background-color: #FFFFFF;width: 1280px;">
                <tr style="height: 70px;">
                    <th colspan="2"><a href=""><i class="fa fa-check-square ico-01" aria-hidden="true"></i></a>全选</th>
                    <th>商品名称</th>
                    <th style="text-align: center;">单价</th>
                    <th style="text-align: center;">数量</th>
                    <th style="text-align: right;">小计</th>
                    <th style="text-align: center;">操作</th>
                </tr>
                <tr style="height: 120px;border-top: 1px solid;">
                    <td style="width: 150px;"><a href=""><i class="fa fa-check-square ico-01" aria-hidden="true"></i></a></td>
                    <td style="width: 120px;"><a href=""><img class="img-responsive" style="width: 80px;height: 80px;" src="http://www.shumasheying.org.cn/upload/portal/20210916/88ee6185129a0833ef3063396774e0e5.jpg" alt=""></a></td>
                    <td><a href="">户外保温杯</a></td>
                    <td style="width: 150px;text-align: center;">27.9元</td>
                    <td style="width: 150px;text-align: center;">
                        <p style="border: 1px solid;line-height: 38px;">
                            <a @click="add()" href="" class="s-a-03">+</a>
                            <span class="s-span-02">0</span>
                            <a @click="reduce()" href="" class="s-a-03">-</a>
                        </p>
                    </td>
                    <td style="width: 150px;text-align: right;">27.9元</td>
                    <td style="width: 150px;text-align: center;"><a href=""><i class="fa fa-window-close ico-01" aria-hidden="true"></i></a></td>
                </tr>
            </table>
        </div>
        <div style="background-color: #FFFFFF;margin-top: 30px; height: 50px;overflow: hidden;">
            <div style="float: left;height: 50px;line-height: 50px;">
                <a  id="s-a-03" href="" style="color: #757575;margin-left: 32px;">继续购物</a>
                <span style="margin-left: 16px;padding-left: 16px;color: #757575;border-left: 1px solid #eee;">共<i style="color: #FF6700"> 2 </i>件商品，已选择<i style="color: #FF6700"> 0 </i>件</span>
            </div>
            <div style="float: right;height: 50px;line-height: 50px;">
                <span style="color: #FF6700;position: relative;top: -5px;">合计:<i style="font-size: 30px;"> 29 </i>元</span>
                <a id="s-a-04" href="" style="display: inline-block; text-align: center;color: #b0b0b0;background-color: #e0e0e0;width: 200px;height: 50px;font-size: 18px;margin-left: 50px;position: relative;top: -5px;">去结算</a>
            </div>
        </div>
    </div>
    <h2 class="s-h2-01"><span class="s-span-01">买购物车中商品的人还买了</span></h2>
    <div style="width: 1280px;margin:0 auto;padding-bottom: 38px;">
        <div class="row">
            <div v-for="c in c_arr" class="col-md-2">
                <a href="" class="s-a-01">
                    <div class="thumbnail">
                        <img class="s-img-01" :src="c.url" alt="...">
                        <div class="caption">
                            <p class="s-p-01">{{c.title}}</p>
                            <p class="s-p-02">{{c.price}}</p>
                            <p class="s-p-03">{{c.sales}}</p>
                        </div>
                        <a href="" class="s-a-02">加入购物车</a>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>
<footer>
    <div class="f-div-01">版权所有 Copyright © 2019 北京天之星文化传媒中心 All Rights Reserved 备案序号：京ICP备13014113号-4</div>
</footer>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios框架(实现异步请求):备用地址-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>-->
<!--引入axios框架(实现异步请求)-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let section_vm = new Vue({
        el: "section",
        data: {
            c_arr: [],
        },
        methods: {
            add:function () {
                //得到地址栏中的id
                let id = location.search.split("=")[1];
                axios.get("/commodity/add?id="+id).then(function () {
                    location.reload();
                })
            },
            reduce:function () {
                //得到地址栏中的id
                let id = location.search.split("=")[1];
                axios.get("/commodity/reduce?id="+id).then(function () {
                    location.reload();
                })
            },
        },
        created:function () {
            axios.get("/commodity/selectC1").then(function (response) {
                section_vm.c_arr = response.data;
            })
        }

    })
</script>
</body>
</html>